<template>
    <div ref="circleChart" :style="{ width: '64px', height: '64px' }"></div>
</template>

<script lang="ts"  setup>
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { watch } from 'vue';
import { onMounted, ref, PropType } from 'vue';


export interface DataItem {
    value: number;
    name?: string;
}

const props = defineProps({
    colors: {
        type: Array as PropType<string[]>,
        require: true,
        default: () => ['#E60044', '#eeeeee'],
    },
    data: {
        type: Array as PropType<DataItem[]>,
        require: true,
        default: () => [],
    }
});
let myChart: EChartsType | null = null;
const circleChart = ref(null);

const initChart = () => {
    const dom = circleChart.value;
    if (dom) {
        if (myChart) {
            myChart.dispose();
        }
        myChart = echarts.init(dom);
        myChart.setOption({
            legend: { show: false },
            tooltip: { show: false },
            color: props.colors,
            label: { show: false },
            emphasis: {
                disabled: true
            },
            select: {
                disabled: true
            },
            series: [
                {
                    type: 'pie',
                    radius: ['65%', '100%'],
                    label: {
                        show: false
                    },
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: false
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1, // 间距的宽度
                            borderColor: '#fff', // 背景色
                        }
                    },
                    data: props.data
                }
            ],
        });
        window.onresize = function () {
            if (myChart) {
                myChart.resize();
            }

        };
    }
};

watch(()=>props.data,()=>{
    initChart();
});
onMounted(() => {
    initChart();
});
</script>

<!-- <style lang="scss" scoped></style> -->
